/**
 * Website colors. Determine color palette for dark and light theme
 */

@charset "utf-8";

/**
 * Light color palette
 */
$l-text-color:       #111;
$l-link-color:       #aaa;
$l-background-color: #fdfdfd;
$l-brand-color:      #2a7ae2;
$l-grey-color:       #828282;
$l-grey-color-light: lighten($l-grey-color, 40%);
$l-grey-color-dark:  darken($l-grey-color, 25%);
$l-code: #EEF;
$l-crimson: #DC143C;
$l-nav: $l-link-color;
$l-page: $l-link-color;

/**
 * Dark color palette
 */
$d-text-color:       #e7e7e7;
$d-link-color:       #cccccc;
$d-background-color: #191919;
$d-brand-color:      #2a7ae2;
$d-grey-color:       #A7A7A7;
$d-grey-color-light: lighten($l-grey-color, 40%);
$d-grey-color-dark:  darken($l-grey-color, 25%);
$d-code: #2f2f33;
$d-crimson: #DC143C;
$d-nav: $d-link-color;
$d-page: $d-link-color;

/**
 * Light theme color definitions
 */
body.light {
  color: $l-text-color;
  background-color: $l-background-color;

  /**
   * Links
   */
  a {
    color: $l-link-color !important;

    &:visited {
        color: darken($l-brand-color, 50%);
    }

    &:hover {
        color: darken($l-link-color, 50%) !important;
        border-color: darken($l-link-color, 15%);
    }

    &.page-link{
      &:hover {
          color: $l-text-color;
          border-color: darken($l-link-color, 50%);
      }
    }
    &.postLink{
      color: darken($l-link-color, 50%) !important;

      &:visited {
          color: $l-crimson !important;
          border-color: $l-crimson;
      }
    }
    &.post-title-link{
      color: darken($l-link-color, 50%) !important;

      &:visited {
          color: $l-crimson !important;
          border-color: $l-crimson;
      }
    }
  }

  blockquote {
    color: $l-grey-color;
    border-left-color: $l-grey-color-light;
  }

  /**
   * Code formatting
   */
  pre,
  code {
    border-color: $l-grey-color-light;
    background-color: $l-code;
  }

  /**
   * Icons
   */
  .icon > svg path {
    fill: $l-grey-color;
  }

  /**
   * Site header
   */
  .site-header {
    border-top-color: $l-grey-color-dark;
    border-bottom-color: $l-grey-color-light;
  }

  .site-title,
  .site-title:visited {
    color: $l-grey-color-dark;
  }

  .site-navigation {
    color: $l-nav;
  }

  .page-tagline {
    color: $l-page;
  }

  .page-link {
    color: $l-page;
  }

  .site-nav .page-link {
    color: $l-text-color;
  }

  @include media-query($on-palm) {
    background-color: $l-background-color;
    border: 1px solid $l-grey-color-light;

    .menu-icon > svg path {
      fill: $l-grey-color-dark;
    }
  }

  /**
   * Site footer
   */
  .site-footer {
    border-top-color: $l-grey-color-light;
  }

  .footer-col-wrapper {
    color: $l-grey-color;
  }
}

/**
 * Dark theme color definitions
 */
body.dark {
  color: $d-text-color;
  background-color: $d-background-color;

  /**
   * Links
   */
  a {
    color: $d-link-color !important;

    &:visited {
        color: darken($d-brand-color, 50%);
    }

    &:hover {
        color: darken($d-link-color, 50%) !important;
        border-color: darken($d-link-color, 15%);
    }

    &.page-link{
      &:hover {
          color: $d-text-color;
          border-color: darken($d-link-color, 50%);
      }
    }
    &.postLink{
      color: darken($d-link-color, 50%) !important;

      &:visited {
          color: $d-crimson !important;
          border-color: $d-crimson;
      }
    }
    &.post-title-link{
      color: darken($d-link-color, 50%) !important;

      &:visited {
          color: $d-crimson !important;
          border-color: $d-crimson;
      }
    }
  }

  blockquote {
    color: $d-grey-color;
    border-left-color: $d-grey-color-light;
  }

  /**
   * Code formatting
   */
  pre,
  code {
    border-color: $d-grey-color;
    background-color: $d-code;
  }

  /**
   * Icons
   */
  .icon > svg path {
    fill: $d-grey-color;
  }

  /**
   * Site header
   */
  .site-header {
    border-top-color: $d-grey-color-dark;
    border-bottom-color: $d-grey-color-light;
  }

  .site-title,
  .site-title:visited {
    color: $d-grey-color-light;
  }

  .site-navigation {
    color: $d-nav;
  }

  .page-tagline {
    color: $d-page;
  }

  .page-link {
    color: $d-page;
  }

  .site-nav .page-link {
    color: $d-text-color;
  }

  @include media-query($on-palm) {
    background-color: $d-background-color;
    border: 1px solid $d-grey-color-light;

    .menu-icon > svg path {
      fill: $d-grey-color-dark;
    }
  }

  /**
   * Page content
   */
  .post-meta {
    color: $d-grey-color;
  }

  /**
   * Site footer
   */
  .site-footer {
    border-top-color: $d-grey-color-light;
  }

  .footer-col-wrapper {
    color: $d-grey-color;
  }
}
